<template>
	<view class="ai-photo-container">
		<!-- 状态栏 -->
		<view class="status-bar">
			<text class="time">6:56</text>
			<view class="status-icons">
				<text class="wifi">📶</text>
				<text class="battery">🔋 47%</text>
			</view>
		</view>

		<!-- 左上角返回按钮 -->
		<view class="back-button" @click="goBack">
			<text class="back-icon">‹</text>
		</view>
		
		<!-- 重新上传照片按钮 -->
		<view class="upload-button" @click="uploadPhoto">
			<image src="/static/images/lvpai/1521754111180_.pic_hd.jpg" mode="aspectFill" class="upload-avatar"></image>
			<text class="upload-text">重新上传照片</text>
		</view>



		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 主图展示区域 -->
			<view class="main-image-section">
				<!-- 主图容器 -->
				<view class="main-image-container">
					<image :src="selectedTemplate.image" mode="aspectFill" class="main-image"></image>
				</view>
				
				<!-- 右侧悬浮缩略图列表 -->
				<view class="floating-thumbnails">
					<view 
						class="thumbnail-item"
						v-for="(template, index) in templates"
						:key="template.id"
						:class="{ selected: selectedTemplate.id === template.id }"
						@click="selectTemplate(template)"
					>
						<image :src="template.image" mode="aspectFill" class="thumbnail-image"></image>
						<!-- 选中指示器 -->
						<view class="selected-indicator" v-if="selectedTemplate.id === template.id">
							<text class="check-mark">✓</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部信息区域 -->
			<view class="bottom-section">
				<!-- 地点标题 -->
				<view class="location-info">
					<text class="location-title">{{ selectedTemplate.title }}</text>
				</view>
			</view>
		</view>
		
		<!-- 悬浮生成按钮 -->
		<view class="floating-generate-button" @click="generatePhoto">
			<text class="generate-text">立即生成</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selectedTemplateId: 2, // 默认选择第二个模板（泉州簪花）
			templates: [
				{
					id: 1,
					title: '福建·平潭时光',
					image: '/static/images/lvpai/1521754111180_.pic_hd.jpg',
					points: 10
				},
				{
					id: 2,
					title: '福建·泉州簪花',
					image: '/static/images/lvpai/1541754111183_.pic_hd.jpg',
					points: 10
				},
				{
					id: 3,
					title: '北京·首都映像',
					image: '/static/images/lvpai/1581754111190_.pic_hd.png',
					points: 10
				},
				{
					id: 4,
					title: '福建·鳜影雅韵',
					image: '/static/images/lvpai/1591754111191_.pic_hd.png',
					points: 10
				}
			]
		}
	},
	computed: {
		selectedTemplate() {
			return this.templates.find(t => t.id === this.selectedTemplateId) || this.templates[0];
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		selectTemplate(template) {
			this.selectedTemplateId = template.id;
			// 添加触觉反馈
			uni.vibrateShort({
				type: 'light'
			});
		},
		
		uploadPhoto() {
			uni.showActionSheet({
				itemList: ['拍照', '从相册选择'],
				success: (res) => {
					if (res.tapIndex === 0) {
						// 拍照
						uni.chooseImage({
							count: 1,
							sourceType: ['camera'],
							success: (res) => {
								uni.showToast({
									title: '照片上传成功！',
									icon: 'success'
								});
							}
						});
					} else if (res.tapIndex === 1) {
						// 从相册选择
						uni.chooseImage({
							count: 1,
							sourceType: ['album'],
							success: (res) => {
								uni.showToast({
									title: '照片上传成功！',
									icon: 'success'
								});
							}
						});
					}
				}
			});
		},
		
		generatePhoto() {
			uni.showModal({
				title: '生成AI写真',
				content: `确认使用「${this.selectedTemplate.title}」模板生成AI写真吗？`,
				confirmText: '立即生成',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '正在生成中...'
						});
						
						// 模拟生成过程
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '生成成功！',
								icon: 'success',
								duration: 1500
							});
							
							// 跳转到我的相册页面
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my_photo/index'
								});
							}, 1500);
						}, 2000);
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.ai-photo-container {
	width: 100%;
	min-height: 100vh;
	background: #000;
	position: relative;
	overflow: hidden;
}

/* 状态栏 */
.status-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 44px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20rpx;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.1);
}

.time {
	color: white;
	font-size: 32rpx;
	font-weight: 600;
}

.status-icons {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.wifi, .battery {
	color: white;
	font-size: 28rpx;
}

/* 左上角返回按钮 */
.back-button {
	position: absolute;
	top: 100rpx;
	left: 30rpx;
	width: 80rpx;
	height: 80rpx;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10rpx);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	transition: all 0.3s ease;
	border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.back-button:active {
	transform: scale(0.9);
	background: rgba(0, 0, 0, 0.5);
}

.back-icon {
	color: white;
	font-size: 48rpx;
	font-weight: 300;
	margin-left: -4rpx; /* 微调视觉居中 */
}

/* 重新上传照片按钮 */
.upload-button {
	position: absolute;
	top: 200rpx;
	left: 30rpx;
	background: rgba(255, 182, 193, 0.9);
	border-radius: 50rpx;
	padding: 16rpx 24rpx;
	display: flex;
	align-items: center;
	gap: 12rpx;
	backdrop-filter: blur(10rpx);
	box-shadow: 0 4rpx 16rpx rgba(255, 182, 193, 0.3);
	transition: all 0.3s ease;
	z-index: 200;
}

.upload-button:active {
	transform: scale(0.95);
}

.upload-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 2rpx solid rgba(255, 255, 255, 0.8);
}

.upload-text {
	color: #d63384;
	font-size: 24rpx;
	font-weight: 600;
}

/* 主要内容区域 */
.main-content {
	height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: 44px;
}

/* 主图展示区域 */
.main-image-section {
	flex: 1;
	position: relative;
	overflow: hidden;
}

.main-image-container {
	width: 100%;
	height: 100%;
	position: relative;
}

.main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 右侧悬浮缩略图列表 */
.floating-thumbnails {
	position: absolute;
	right: 40rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	z-index: 100;
}

.thumbnail-item {
	width: 100rpx;
	height: 140rpx;
	border-radius: 12rpx;
	overflow: hidden;
	border: 3rpx solid transparent;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.3);
}

.thumbnail-item.selected {
	border-color: #7ed321;
	transform: scale(1.05);
	box-shadow: 
		0 12rpx 32rpx rgba(126, 211, 33, 0.4),
		0 8rpx 16rpx rgba(126, 211, 33, 0.3);
}

.thumbnail-item:active {
	transform: scale(0.95);
}

.thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 选中指示器 */
.selected-indicator {
	position: absolute;
	top: 6rpx;
	right: 6rpx;
	width: 24rpx;
	height: 24rpx;
	background: #7ed321;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 3rpx 9rpx rgba(126, 211, 33, 0.4);
}

.check-mark {
	color: white;
	font-size: 16rpx;
	font-weight: 700;
}

/* 底部信息区域 */
.bottom-section {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.9) 100%);
	padding: 80rpx 40rpx 180rpx;
	z-index: 50;
}

/* 地点信息 */
.location-info {
	text-align: center;
	margin-bottom: 50rpx;
}

.location-title {
	color: white;
	font-size: 52rpx;
	font-weight: 700;
	text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.5);
	letter-spacing: 2rpx;
}

/* 悬浮生成按钮 */
.floating-generate-button {
	position: fixed;
	bottom: 60rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #7ed321 0%, #56bf47 100%);
	color: white;
	padding: 28rpx 80rpx;
	border-radius: 50rpx;
	min-width: 500rpx;
	box-shadow: 
		0 12rpx 32rpx rgba(126, 211, 33, 0.4),
		0 6rpx 16rpx rgba(126, 211, 33, 0.2);
	transition: all 0.3s ease;
	z-index: 1000;
	margin-bottom: env(safe-area-inset-bottom);
}

.floating-generate-button:active {
	transform: translateX(-50%) translateY(2rpx) scale(0.98);
	box-shadow: 
		0 8rpx 24rpx rgba(126, 211, 33, 0.5),
		0 4rpx 12rpx rgba(126, 211, 33, 0.3);
}

.generate-text {
	font-size: 36rpx;
	font-weight: 600;
	letter-spacing: 2rpx;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.back-button {
		left: 20rpx;
		top: 80rpx;
		width: 64rpx;
		height: 64rpx;
	}
	
	.back-icon {
		font-size: 40rpx;
	}
	
	.upload-button {
		top: 180rpx;
		left: 20rpx;
		padding: 12rpx 20rpx;
	}
	
	.upload-avatar {
		width: 32rpx;
		height: 32rpx;
	}
	
	.upload-text {
		font-size: 22rpx;
	}
	
	.floating-thumbnails {
		right: 40rpx;
		gap: 15rpx;
	}
	
	.thumbnail-item {
		width: 80rpx;
		height: 120rpx;
	}
	
	.location-title {
		font-size: 44rpx;
	}
	
	.floating-generate-button {
		min-width: 400rpx;
		padding: 24rpx 60rpx;
		bottom: 40rpx;
	}
	
	.generate-text {
		font-size: 32rpx;
	}
}

/* 平板适配 */
@media (min-width: 768px) {
	.floating-thumbnails {
		right: 40rpx;
		gap: 30rpx;
	}
	
	.thumbnail-item {
		width: 120rpx;
		height: 160rpx;
	}
}
</style>